<template>
	<view class="content">
		<view class="box">
			<view class="box-bg">
				<view class="withdrawal-text">
					可提现积分（元）
				</view>
				<view class="withdrawal-money">
					<text class="symbol">¥</text>
					<text class="money">{{memberhome.amount}}</text>
				</view>
			</view>
			<view class="pay">
				<view class="pay-text">
					提现积分
				</view>
				<view class="pay-input">
					<u-input border="none" v-model="cashForm.money" type="number" font-size="40" color="#FF0000">
						<u--text text="¥" slot="prefix" color="#FF0000" size="50rpx"></u--text>
						<u--text text="全部提现" slot="suffix" color="#FF0000" size="36rpx" @click="allMoney"></u--text>
					</u-input>
				</view>
				<view class="tips-box red-text">
					*积分提现将扣除{{kefuData.commission}}%手续费，正常{{kefuData.account_time}}个工作日到账，法定节假日周末顺延。
				</view>
				<view class="withdrawaltype">
					提现方式
				</view>
				<view class="payname">
					<view class="Alipay-box" @click="payType('Alipay')">
						<view class="pay-title">
							<view class="pay-img">
								<u--image :showLoading="true" src="/static/img/Alipay.png" width="44rpx"
									height="44rpx"></u--image>
							</view>
							<view class="pay-name">
								支付宝
							</view>
						</view>
						<view class="pay-function">
							<text style="margin-right: 16rpx;" v-if="Alipay.name">{{Alipay.name}}</text>
							<u--image :showLoading="true" src="/static/img/radio_active.png" width="40rpx"
								height="40rpx" v-if="payname=='Alipay'"></u--image>
							<u--image :showLoading="true" src="/static/img/radio.png" width="40rpx" height="40rpx"
								v-else></u--image>
						</view>
					</view>
					<view class="WeChat-box" @click="payType('WeChat')">
						<view class="pay-title">
							<view class="pay-img">
								<u--image :showLoading="true" src="/static/img/WeChat.png" width="44rpx"
									height="44rpx"></u--image>
							</view>
							<view class="pay-name">
								微信
							</view>
						</view>
						<view class="pay-function">
							<text style="margin-right: 16rpx;" v-if="WeChat.name">{{WeChat.name}}</text>
							<u--image :showLoading="true" src="/static/img/radio_active.png" width="40rpx"
								height="40rpx" v-if="payname=='WeChat'"></u--image>
							<u--image :showLoading="true" src="/static/img/radio.png" width="40rpx" height="40rpx"
								v-else></u--image>
						</view>
					</view>
					<view class="UnionPay-box" @click="payType('UnionPay')">
						<view class="pay-title">
							<view class="pay-img">
								<u--image :showLoading="true" src="/static/img/UnionPay.png" width="44rpx"
									height="44rpx"></u--image>
							</view>
							<view class="pay-name">
								银联
							</view>
						</view>
						<view class="pay-function" style="line-height: 44rpx;display: flex;">
							<view class="pay-function-text">{{bank.bank_open}}</view>
							<u-icon name="arrow-right" size="24rpx"></u-icon>
						</view>
					</view>
				</view>
				<view class="confirmed">
					<view class="btn" @click="withdrawalFunc">
						确认提现
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				payname: '',
				bank: {},
				cashForm: {
					money: '',
					type: '',
					qrcode_url: '',
					name:'',
					mobile:''
				},
				memberhome: {},
				Alipay:{},
				WeChat:{},
				kefuData:{},
				settingData:{},
				avatar:'',
				canClick:true
			}
		},
		onLoad() {
			console.log(this.Alipay,this.WeChat)
			this.settingData = uni.getStorageSync('settingData')
			if(this.settingData){
				this.kefuData= this.settingData.value
				this.avatar = this.settingData.image
			}
		},
		onShow() {
			uni.getStorage({
				key:'Alipay',
				success: (res) => {
					this.Alipay = res.data
				},
			})
			uni.getStorage({
				key:'WeChat',
				success: (res) => {
					this.WeChat = res.data
				},
			})
			if(this.cashForm.type==1){
				uni.getStorage({
					key:'Alipay',
					success: (res) => {
						this.cashForm.qrcode_url = res.data.image
						this.cashForm.name = res.data.name
					},
				})
			}else{
				uni.getStorage({
					key:'WeChat',
					success: (res) => {
						this.cashForm.qrcode_url = res.data.image
						this.cashForm.name = res.data.name
					},
				})
			}
			this.getMemberHome()
		},
		methods: {
			allMoney() {
				this.cashForm.money = this.memberhome.amount
			},
			payType(type) {
				if (type == 'Alipay') {
					this.payname = 'Alipay'
					this.cashForm.type = 1
					this.bank = {}
					this.goQrcode(this.cashForm.type)
				} else if (type == 'WeChat') {
					this.payname = 'WeChat'
					this.cashForm.type = 2
					this.bank = {}
					this.goQrcode(this.cashForm.type)
				} else {
					this.payname = 'UnionPay'
					this.cashForm.type = 3
					this.goBank()
				}
			},
			withdrawalFunc() {
				if (this.cashForm.money == '') {
					uni.showToast({
						title: '请输入提现积分',
						icon: 'none'
					});
					return
				}
				if (this.cashForm.money <= 0) {
					uni.showToast({
						title: '请输入正确提现积分',
						icon: 'none'
					});
					return
				}
				if (this.cashForm.type == '') {
					uni.showToast({
						title: '请选择提现方式',
						icon: 'none'
					});
					return
				}
				if(!this.canClick){
					return
				}else{
					this.canClick = false
					setTimeout(()=>{
						this.canClick = true
					},1500)
					const obj = {}
					
					if (this.cashForm.type == 3) {
						this.cashForm.name = this.bank.name
						this.cashForm.mobile = this.bank.mobile
						this.cashForm.mobile = this.bank.mobile
						this.cashForm.qrcode_url = ''
						obj.bank_id = this.bank.id
						this.$api.withdraw({
							...this.cashForm,
							...obj
						}).then(res => {
							console.log(res)
							this.cashForm = {}
							this.payname = ''
							uni.showToast({
								title: '提现成功'
							});
							this.getMemberHome()
						}).catch(err=>{
							console.log(err)
						})
					}else {
						// this.form = this.cashForm.type == 1?this.Alipay:this.WeChat
						if(!this.cashForm.qrcode_url){
							uni.showToast({
								title: '请添加您的收款码',
								icon: 'none'
							});
							return
						}
						if(!this.cashForm.name){
							uni.showToast({
								title: '请填写您的姓名',
								icon: 'none'
							});
							return
						}
						console.log(this.cashForm)
						this.$api.withdraw({
							...this.cashForm,
						}).then(res => {
							console.log(res)
							this.cashForm = {}
							this.payname = ''
							uni.showToast({
								title: '提现成功'
							});
							this.getMemberHome()
						}).catch(err=>{
							console.log(err)
						})
					}
				}
				
				
			},
			goBank() {
				uni.navigateTo({
					url: '/pages/index/pay/mybank'
				})
			},
			goQrcode(e) {
				if (this.cashForm.type == 3) return
				uni.navigateTo({
					url: '/pages/index/pay/qrcode?type=' + e
				})
			},
			bankValue(e) {
				this.bank = e
				console.log(e);
			},
			getMemberHome() {
				this.$api.memberhome().then(res => {
					this.memberhome = res.data
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		min-height: 100vh;
		background: RGBA(245, 245, 245, 1);
		z-index: -1;

		.box {
			padding: 0 30rpx;
			background: url('@/static/img/cash_bg.png') no-repeat;
			background-size: 100% 472rpx;

			.box-bg {
				padding-top: 146rpx;
				height: 326rpx;

				.withdrawal-text {
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 36rpx;
					color: #666666;
					line-height: 40rpx;
					text-align: left;
					font-style: normal;
				}

				.withdrawal-money {
					padding-top: 16rpx;

					.symbol {
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 36rpx;
						color: #EA6F29;
						line-height: 44rpx;
						text-align: left;
						font-style: normal;
					}

					.money {
						padding-left: 10rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 60rpx;
						color: #EA6F29;
						line-height: 84rpx;
						text-align: left;
						font-style: normal;
					}
				}
			}

			.pay {
				box-sizing: border-box;
				padding: 40rpx 30rpx 0 30rpx;
				height: 1070rpx;
				background: #FFFFFF;
				border-radius: 10rpx;
				transform: translateY(-146rpx);

				.pay-text {
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 36rpx;
					color: #111111;
					line-height: 44rpx;
					text-align: left;
					font-style: normal;
				}

				.pay-input {
					border-bottom: 1rpx solid #ccc;
					padding-top: 60rpx;
					font-size: 36rpx;
				}

				.withdrawaltype {
					padding-top: 80rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 36rpx;
					color: #111111;
					line-height: 44rpx;
					text-align: left;
					font-style: normal;
				}

				.payname {

					.Alipay-box,
					.WeChat-box,
					.UnionPay-box {
						margin-top: 40rpx;
						display: flex;
						justify-content: space-between;

						.pay-title {
							display: flex;

							.pay-name {
								padding-left: 30rpx;
								font-family: PingFangSC, PingFang SC;
								font-weight: 400;
								font-size: 32rpx;
								color: #111111;
								line-height: 40rpx;
								text-align: left;
								font-style: normal;
							}
						}
					}
				}

				.confirmed {
					display: flex;
					justify-content: center;
					padding-top: 120rpx;

					.btn {
						width: 630rpx;
						height: 84rpx;
						background: linear-gradient(270deg, #EA6F29 0%, #FAAA7D 100%);
						border-radius: 16rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 36rpx;
						color: #FFFFFF;
						line-height: 84rpx;
						text-align: center;
						font-style: normal;
					}
				}
			}
		}
	}
	.pay-function{
		display:flex;
		justify-content: center;
		align-items: center;
	}
	.pay-function-text {
		padding-right: 10rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #111111;
		line-height: 40rpx;
		text-align: left;
		font-style: normal;
	}
	.red-text{
		color: #D06122;
		margin-top: 12rpx;
		padding: 0 10rpx;
		
	}
</style>